<template>
  <el-menu
    text-color="#f0f2f5"
    background-color="#001529"
    active-text-color="#f25b56"
    :collapse="isCollapse"
    :default-active="activeName"
    :collapse-transition="false"
    @select="menuSelect">
    <transition v-for="(item, i) in menuList" :key="i">
      <el-submenu
        v-if="item.subMenu"
        :index="item.path">
        <template slot="title">
          <i :class="item.icon || 'el-icon-folder-opened'"></i>
          <span>{{ item.menuName }}</span>
        </template>
        <el-menu-item-group :title="item.menuName">
          <el-menu-item
            v-for="(el, index) in item.subMenu"
            :key="index"
            :index="el.path"
          >{{ el.menuName }}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item v-else :index="item.path">
        <i :class="item.icon"></i>
        <span slot="title">{{ item.menuName }}</span>
      </el-menu-item>
    </transition>
  </el-menu>
</template>
<script>
export default {
  name: "LeftMenu",
  props: {
    menuList: {
      type: Array,
      default: ()=>{
        return []
      }
    },
    // 控制展开和收缩
    isCollapse: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      activeName: this.$route.path
    };
  },
  methods: {
    menuSelect(path) {
      this.$emit('menuAction', path)
    }
  }
};
</script>